<template>
  <CommonCard title="今日用户数" :value="numberFormat(orderUser)">
    <div ref="barChartRef" style="width:100%;height:100%"></div>
    <template #footer>
      <span>退货率</span>
      <span class="emphasis">{{returnRate}}%</span>
    </template>
  </CommonCard>
</template>

<script lang="ts">
import CommonCard from './CommonCard.vue';
export default {
  name: 'TodayUsers',
  components: {
    CommonCard
  }
};
</script>
<script lang="ts" setup>
import * as echarts from 'echarts';
import type { EchartsType } from 'echarts';
import { ref, onMounted, computed, watch } from 'vue';
import { useReportDataStore } from '@/stores/reportData';
import useFormat from '@/hooks/useFormat';
const { numberFormat, moneyFormat } = useFormat();
const reportDataStore = useReportDataStore();
//定义页面中的标签对象
const barChartRef = ref();
let barChart: EChartsType;
// 1. 今日交易用户数
const orderUser = computed(() => reportDataStore.reportData.orderUser);
// 2. 退单率
const returnRate = computed(() => reportDataStore.reportData.returnRate);
// 3. X轴
const orderUserTrendAxis = computed(() => reportDataStore.reportData.orderUserTrendAxis);
// 4. Y需要的数据
const orderUserTrend = computed(() => reportDataStore.reportData.orderUserTrend);

//准备配置项 根据配置项内容生成图形结构
const getOption = () => {
  return {
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
    xAxis: {
      // boundaryGap: false, // X轴两侧不留白
      // show:false, // 不显示水平值
      // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] // x轴数据列表
      data: orderUserTrendAxis.value
    },
    yAxis: {
      show: false // 垂直那些线也不要
    },
    series: [
      {
        type: 'bar',
        // data: orderTrend.value,
        // data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123]
        data: orderUserTrend.value
        // 将折线设置成平滑的曲线
      }
    ],
    // 显示提示
    tooltip: {
      trigger: 'axis',
      // 是否在组件内显示
      confine: true
    }
  };
};

onMounted(() => {
  // ref格式的数据，在setup中使用的时候，一定要通过.value的方式来使用
  barChart = echarts.init(barChartRef.value);

  //实现响应式效果
  window.addEventListener('resize', () => {
    barChart && barChart.resize();
  });
});
watch(orderUser, () => {
  barChart.setOption(getOption());
});
</script>


<style>
</style>